<template>
    <div class="footer-box">
        <router-link v-for="(item, idx) in footerList" :key="idx" :to="item.path">
        {{item.meta.label}}
      </router-link>
    </div>
</template>

<script setup lang="ts">
import { FooterList } from '../router'
import { ref } from 'vue'

const footerList = ref([...FooterList])
</script>

<style lang="scss" scoped>
.footer-box {
    width: 100%;
    height: 50px;
    display: flex;
    border-top: 1px solid #ccc;
    flex-shrink: 0;
    a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
    }
    .router-link-active {
        color:red;
    }
}
</style>